$.fn.MapIllustration = function(cities,options) {
    var hasPops = [];
    var geoCoordMap = {};
    var lineData = [];
    var myChart = echarts.init(document.getElementById($(this).attr('id')));
    var ItemData = [];
    var BaseData = [];
    var defaults = {
        roam:true,
        zoom:1,
        center:null
    };
    var options = $.extend(defaults,options); //传入的参数覆盖默认参数
    for(c in cities){
       geoCoordMap[cities[c].name] = [cities[c].longitude, cities[c].latitude];
       var items = cities[c].items;
       for(k in items){
          geoCoordMap[items[k].name] = [items[k].longitude, items[k].latitude];
          ItemData.push([{name:cities[c].name},{name:items[k].name,value:items[k].name},{title:items[k].title}]);
       }
       BaseData.push([cities[c].name,ItemData,cities[c].title]);
    }
    var convertData = function(data) {
        console.log(data);
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value,
                    title:dataItem[2].title,
                });
            }
        }
        return res;
    };
    var color = ['#00b9da', '#00b9da', '#46bee9'];
    var series = [];
    BaseData.forEach(function(item, i) {
        console.log("DDD"+item[0]);
        series.push({
            name: item[0] + '',
            type: 'lines',
            zlevel: 1,
            effect: {
                show: true,
                period: 8,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 4
            },
            lineStyle: {
                normal: {
                    color: color[1],
                    width: 1,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + '',
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'arrow'],
            symbolSize: 8,
            effect: {
                show: true,
                period: 3,
                trailLength: 0,
                symbolSize: function(val){
                  return val[2] / 8;
                }
            },
            lineStyle: {
                normal: {
                    color: color[0],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2,
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + ' Top10',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 3,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return 10;//val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[0]
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: '',//dataItem[1].name,
                    subname:dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                    label:item[2]
                };
            })
        },
          {
            name: item[0] + ' Top10',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 3,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return 6;//val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[1]
                }
            },
            data: [{
                  name: '',//item[0],
                  subname:item[0],
                  value: geoCoordMap[item[0]].concat([40]),
                  label:item[2]
              }]
        }
        );
    });
    console.log(series)

    option = {
        backgroundColor: '#212121',
        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                console.log(params);
                if (params.seriesType == "effectScatter") {
                    return  params.data.subname;
                } else if (params.seriesType == "lines") {
                    return params.data.fromName + " » " + params.data.toName + "<br />" + params.data.title;
                    //return params.data.title;
                } else {
                    return params.name;
                }
            },
            textStyle:{
                color: '#fff',
                fontSize:12,
                fontWeight:'normal'
            },
            padding: [10, 15]
        },
        
        geo: {
            map: 'world',
            label: {
                emphasis: {
                    show: true,
                    color: '#fff'
                }
            },
            roam: options.roam,
            zoom: options.zoom,
            center: options.center,
            itemStyle: {
                normal: {
                    areaColor: '#2d2e2e',
                    borderColor: '#2d2e2e'
                },
                emphasis: {
                    areaColor: '#282828',
                }
            }
        },
        series: series
    };
    myChart.setOption(option);
}